// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = { // const 按需
    install(app) {
        // 指令逻辑
        // 定义全局指令

        app.directive('img-lazy', {
            mounted(el, binding) {
                // el:指令绑定的元素 img
                // binding: binding.value 指令等于号后面绑定的表达式的值 url
                console.log(el, binding.value)
                const {stop} = useIntersectionObserver(
                    el, ([{ isIntersecting }]) => {
                        console.log(isIntersecting)
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                            // 页面回自动发送src请求。模块中image是没有src的
                            stop() //通过结构赋值获得监听函数stop方法，第一次监听完成之后手动停止监听
                        }
                    }
                )

            }
        })
    }
}